// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Popconfirm, Row, Col, Button, Input, Table, DatePicker } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config, { listConfig } from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './couponReportStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment'

const FormItem = Form.Item
const { MonthPicker, RangePicker } = DatePicker

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const couponDetailView = function ({ dispatch, model, form }) {
	// 表单的子函数
	const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
	// 取出model对象，命名空间
	const { modelObj, namespace } = model

	let { detail, tableQuery, tableMonthDetail } = modelObj

	let couponTypeMap = {
		'1': '代金券',
		'2': '折扣券'
	}

	// 点击处理事件
	const clickHandler = (e) => {
		// 分发到model文件中effects的xxx方法
		dispatch({
			type: `${namespace}/xxx`,
			payload: {}
		});
	}

	let monthList = [],
		receiveNum = [],//领取人数
		transferNum = [],//转赠人数
		checkerNum = [];//核销人数

	tableMonthDetail && tableMonthDetail.forEach((e, i) => {
		monthList.push(e.monthDate + '');
		receiveNum.push(Number.parseFloat(e.receiveNum));
		transferNum.push(Number.parseFloat(e.transferNum));
		checkerNum.push(Number.parseFloat(e.checkerNum));
	})

	let useColumns = [{
		title: '优惠券名称',
		dataIndex: 'couponsName',
		key: 'couponsName',
	}, {
		title: '优惠券类别',
		dataIndex: 'couponsType',
		render: (text, record) => {
			return <div>{couponTypeMap[text || '']}</div>
		}
	}, {
		title: '领取人数',
		dataIndex: 'receiveNum',
	}, {
		title: '转赠人数',
		dataIndex: 'transferNum',
	}, {
		title: '核销人数',
		dataIndex: 'checkerNum',
	}];

	let option = {
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['领取人数', '转赠人数', '核销人数'],
			// x: 'center',
			// y: 'bottom'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			name: '月份',
			boundaryGap: false,
			// data: ['2018-08', '2018-09', '2018-10', '2018-11', '2018-12', '2019-01', '2019-02']
			data: monthList
		},
		yAxis: {
			type: 'value',
			name: '人数'
		},
		series: [
			{
				name: '领取人数',
				type: 'line',
				// stack: '总量',
				// data: [120, 132, 101, 134, 90, 230, 210]
				data: receiveNum
			},
			{
				name: '转赠人数',
				type: 'line',
				// stack: '总量',
				// data: [220, 182, 191, 234, 290, 330, 310]
				data: transferNum
			},
			{
				name: '核销人数',
				type: 'line',
				// stack: '总量',
				// data: [150, 232, 201, 154, 190, 330, 410]
				data: checkerNum
			}
		]
	};

	return (
		<div className={cx('pageLayout')} className={styles.couponDetail}>
			<CollapsiblePanels title="使用情况" hideUpDownBtn={true} className={styles.basicInfo}>
				<Table
					dataSource={detail}
					columns={useColumns}
					pagination={false}
				/>
			</CollapsiblePanels>
			<CollapsiblePanels title="月度分析" hideUpDownBtn={true} >
				<div className="public_listMain">
					<div className="boxShadow listSearchBox">
						<Row>
							<Col {...listConfig.searchCol}>
								<FormItem {...listConfig.searchFormItem} label={'日期'}>
									{
										getFieldDecorator('month', {
											initialValue: (tableQuery && tableQuery.startDate && tableQuery.endDate)
												? [moment(tableQuery.startDate, 'YYYY-MM-DD'), moment(tableQuery.endDate, 'YYYY-MM-DD')]
												: [],
											rules: [
												{
													required: false, message: '请选择日期'
												},
											],
										})
											(
											<RangePicker style={{ width: "100%" }}
												allowClear={false}
												ranges={{ '今天': [moment(), moment()], '这个月': [moment(), moment().endOf('month')] }}
												format={'YYYY-MM-DD'}
												onChange={(value, dateString) => {
													tableQuery.startDate = dateString[0]
													tableQuery.endDate = dateString[1]
													dispatch({ type: `${namespace}/updateStore`, payload: { tableQuery } })
												}}
											/>
											)
									}
								</FormItem>
							</Col>
							<Col {...listConfig.searchCol} >
								<Button type="primary" htmlType="submit" onClick={e => { dispatch({ type: `${namespace}/searchData` }) }} loading={modelObj.loading}>搜索</Button>
								<Button type="default" htmlType="button" onClick={e => { dispatch({ type: `${namespace}/resetMonth`, payload: { cb: () => { resetFields(['month']) } } }) }}>重置</Button>
							</Col>
						</Row>
					</div>
				</div>
				<div>
					<ReactEcharts
						option={option}
					/>
				</div>
			</CollapsiblePanels>
		</div>
	)
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(couponDetailView))
